<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="back-button" @click="goBack">
        <text class="back-icon">←</text>
        <text class="title">{{ drawbookName }}</text>
      </view>
    </view>
<!-- 弹出的多功能窗口 -->

    <!-- 内容区域 -->
    <view class="content">
      <!-- 顶部图片 -->
      <view class="header-image">
        <image  :src="image? image : require('@/static/img/yes.png')" class="header-image"></image>
        <text class="provider-info">由用户{{creator}}提供</text>
      </view>

      <!-- 内容列表 -->
      <view class="content-list">
        <view
          class="content-item"
          v-for="(item, index) in contents"
          :key="index"
		  @click="putin(item)"
        >
          <text class="content-title">{{ item.content }}</text>
          <text class="expand-text">展开查看详情</text>
        </view>
	
      </view>
	  
	    <!-- 弹出的多功能窗口 -->
	      <u-popup :show="show" mode="center" :round="20" @close="close">
	        <view class="popup-container">
	          <view class="popup-title" v-model="title">{{title}}</view>
	          <view class="popup-buttons">
	            <u-row gutter="20">
	              <u-col span="24">
	                <view class="button" @click="startStudy">开始学习</view>
	              </u-col>
	            </u-row>
	            <u-row gutter="20">
	             <u-col span="12">
	           	                <view class="button" @click="readingListening">阅读磨耳朵</view>
	           	              </u-col>
	              <u-col span="12">
	                <view class="button" @click="lockScreenListening">锁屏磨耳朵</view>
	              </u-col>
	            </u-row>
	            <u-row gutter="20">
	            
	              <u-col span="12">
	                <view class="button blue" @click="listeningFillIn">句型填空</view>
	              </u-col>
				  <u-col span="12">
				    <view class="button blue" @click="wordExamples">保留功能位</view>
				  </u-col>
	            </u-row>
	         <!--   <u-row gutter="20">
	              <u-col span="12">
	                <view class="button blue" @click="wordCardStudy">词卡学习</view>
	              </u-col>
	              <u-col span="12">
	                <view class="button blue" @click="wordPractice">单词练习</view>
	              </u-col>
	            </u-row> -->
	            <u-row gutter="20">
	           
	            </u-row>
	          </view>
	        </view>
	      </u-popup>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		//弹窗
		count:'',
			show:false,
			title:`Playing with colours`,
			image:'',
      drawbookName: '', // 从上一页传递过来的drawbook名称
      contents: [], // 存储获取到的内容数据
	  creator:'',
    };
  },
  onLoad(options) {
	
    // 接收上一页传递的drawbook参数
    if (options) {
	
		this.creator =options.creator;
      this.drawbookName = options.name;
	  this.image =options.image;
      this.loadContentData(this.drawbookName);
    } else {
      uni.showToast({
        title: '未接收到name参数',
        icon: 'none',
        duration: 1000
      });
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
putin(item){
	this.show =true;
console.log(item.content)
this.title =item.content
	this.count =item.content;
},
    // 获取内容数据
    loadContentData(name) {
		
      uni.request({
        header: {
          'Content-Type': 'application/json'  // 设置请求头，指定请求体的格式
        },
        url: getApp().globalData.baseUrl + "getDrawContentByName", // 拼接完整的接口地址
        method: 'POST', // 请求方法
        data: {
          name: name // 传递name参数
        },
        dataType: 'json', // 指定返回的数据类型
        success: (res) => {
          if (res.data.code === 0) {
            this.contents = res.data.data;
		
          } else {

          }
        },
        fail: () => {
          uni.showToast({
            title: '请求失败',
            icon: 'none',
            duration: 1000
          });
        }
      });
    },
	
	  close() {
	      this.show = false;
	    },
    startStudy() {
      console.log('开始学习');
     uni.navigateTo({
             url: `/pages/reapp/learnCenter/ideaPage/tenRead?name=${this.count}`
           });
    },
    startSilentReading() {
      console.log('默读');
      this.show = false;
    },
    lockScreenListening() {
      console.log('锁屏磨耳朵');
      this.show = false;
    },
    readingListening() {
      console.log('阅读磨耳朵');
      this.show = false;
    },
    listeningFillIn() {
      console.log('听力填词');
      this.show = false;
    },
    wordCardStudy() {
      console.log('词卡学习');
      this.show = false;
    },
    wordPractice() {
      console.log('单词练习');
      this.show = false;
    },
    wordExamples() {
      console.log('单词例句');
      this.show = false;
    },
	
  },
};
</script>

<style scoped>
	.popup-container {
width: 500rpx;
	  background-color: #fff;
	  border-radius: 20rpx;
right: 80rpx;
padding: 50rpx;

	  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.popup-title {
	  font-size: 36rpx;
	  font-weight: bold;
	  margin-bottom: 30rpx;
	  text-align: center;
	}
	
	.popup-buttons {
	  display: flex;
	  flex-direction: column;
	  width: 45%;
	  gap: 20rpx;
	}
	
	.button {
	  background-color: #FFD700;
	  color: #333;
	  padding: 15rpx 0;
	  border-radius: 50rpx;
	  text-align: center;
	  font-size: 28rpx;
	}
	
	.button.blue {
	  background-color: #6495ED;
	  color: white;
	}

.container {
  background-color: #fff;
  min-height: 100vh;
  padding: 0;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #f9f9f9;
  border-bottom: 1rpx solid #f5f5f5;
}

.back-button {
  display: flex;
  align-items: center;
}

.back-icon {
  font-size: 40rpx;
  color: #333;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-left: 10rpx;
}

.content {
  padding: 20rpx;
  background-color: #fff;
}

.header-image {
  width: 100%;
  position: relative;
}

.header-image image {
  width: 100%;
  height: 300rpx;
  object-fit: cover;
}

.provider-info {
  position: absolute;
  bottom: 20rpx;
  left: 20rpx;
  background-color: rgba(136, 136, 136, 0.7); /* 灰色，透明度70% */
  font-size: 32rpx;
  color: black;
}

.content-list {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
}

.content-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  display: flex;
  flex-direction: column;
  min-height: 150rpx; /* 增加最小高度 */
}

.content-title {
  font-size: 36rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.expand-text {
  font-size: 28rpx;
  color: orange;
  margin-top: auto; /* 将文字推到底部 */
}
.custom-style{
	border-radius: 30rpx;
	background: #ffd725;
	color: #ff000;
}
</style>